{include file="public/account_head"}
<div id="vmsupplyItem">
    <div class="pub_wid notice_cont">
        <div class="mes_left rg">
            <div class="message bgb widthauto radius">
                <h6>我的发布</h6>
                <div class="order_details">

                    <a @click="openPopups" class="rel_but butt">发布</a>
                    <ul>
                        <li @click="changeQueryStatus(1)" class="fortab prepaids5" :class="{'checked':selectQueryStatus==1}" >全部</li>
                        <li @click="changeQueryStatus(2)"  class="fortab prepaids6" :class="{'checked':selectQueryStatus==2}" @change="getNoticeItem()">
<!--                            <select v-model="queryTrade">-->
<!--                                <option value="">所属类别</option>-->
<!--                                <option v-for="item in tradeList" :value="item.name">{{item.name}}</option>-->
<!--                            </select>-->
                            <select v-model="queryTrade">
                                <option value="">所属类别</option>
                                <option value="1">招标公告</option>
                                <option value="2">招标公告</option>
                            </select>
                        </li>
                        <li @click="changeQueryStatus(3)" @change="getNoticeItem()"  class="fortab prepaids7" :class="{'checked':selectQueryStatus==3}">
                            <select v-model="queryStatue">
                                <option value="0">选择审核状态</option>
                                <option v-for="(item,index) in item_status" :value="index+1">{{item}}</option>

                            </select>
                        </li>
                    </ul>
<!--                    <a @click="getNoticeItem()" class="rel_so butt">搜索</a> -->
                </div>
                <div>
                    <div class="tablelist showdomdiv showsss" >
                        <div class="bgb member_box">
                            <div class="table_head widthauto"><span class="five">ID</span><span class="nine">所属分类</span><span class="second">标题</span><span class="nine">服务类型</span><span class="nine">货物类别</span><span class="nine">地区</span><span class="nine">金额</span><span class="nine">发布时间</span><span class="nine">审核状态</span><span class="seventh">操作</span></div>
                            <ul class="widthauto middl_ul">
                                <li v-for="(item,index) in itemDataList">
                                    <span class="five">{{(((current_page-1)*num)+index)+1}}</span>
                                    <span class="nine">{{item_category_status[item.item_category-1]}}</span>
                                    <span  class="second"><a :href="'/index/consignor/noticeDetail/id/'+item.id">{{item.title}}</a></span>
                                    <span class="nine">{{item.service_name}}</span>
                                    <span class="nine">{{item.trade_name}}</span>
                                    <span class="nine">{{item.city}}</span>
                                    <span class="nine">{{item.budget}}万元/年</span>
                                    <span class="nine">{{item.create_time}}</span>
                                    <span class="nine" :class="[{'ing':item.status==1},{'':item.status==2},{'end':item.status==3},{'grey':item.status==4}]">{{item_status[item.status-1]}}</span>
                                    <span class="seventh">
                                        <a v-if="item.status!=2" :href="'/index/consignor/noticeEdit/id/'+item.id">编辑</a>
                                        <a v-if="item.status!=2" @click="RemoveConsignorItem(index,item.id)">删除</a>
                                        <a v-if="item.status==2||item.status==4" @click="ChangeApplyMemberInfStatus(item.id)">报名情况</a>
                                        <a v-if="item.status==2" @click="setNoticeEnd(item)">提前截止</a>
                                        <a v-if="item.status==3" class="end" @click="showRefuseCause(item.status_message)">查看原因</a>
                                    </span>
                                </li>
<!--                                <li><span class="five">1</span><span class="nine">招标公告</span><span class="second">2021年物流运输服务项目招标公告</span><span class="nine">运输服务</span><span class="nine">食品</span><span class="nine">广州</span><span class="nine">50000元</span><span class="nine">2021-01-01</span>-->
<!--                                    <span class="nine">已发布</span><span class="seventh">-->
<!--                                    <a href="#">报名情况</a><a href="#">提前截止</a></span></li>-->
<!--                                <li><span class="five">1</span><span class="nine">招标公告</span><span class="second">2021年物流运输服务项目招标公告</span><span class="nine">运输服务</span><span class="nine">食品</span><span class="nine">广州</span><span class="nine">50000元</span><span class="nine">2021-01-01</span>-->
<!--                                    <span class="nine end">未通过</span><span class="seventh"><a href="#">编辑</a><a href="#">删除</a><a href="#" class="end">查看原因</a></span></li>-->
<!--                                <li><span class="five">1</span><span class="nine">招标公告</span><span class="second">2021年物流运输服务项目招标公告</span><span class="nine">运输服务</span><span class="nine">食品</span><span class="nine">广州</span><span class="nine">50000元</span><span class="nine">2021-01-01</span>-->
<!--                                    <span class="nine grey">已截止</span><span class="seventh"><a href="#">编辑</a></span></li>-->
                            </ul>
                        </div>
                        <div class="widthauto pages_box">
                            <a @click="pageNumGetList(1)">首页</a>
                            <a @click="pageNextList(-1)">上一页</a>
<!--                            <a v-for="item in pageInfo.total" @click="pageNumGetList(item)">{{item}}</a>-->
                            <a v-for="(item,index) in pageInfo.total" :class="(index+1)==current_page?'pages_box_cur':''" @click="pageNumGetList(item)">{{item}}</a>
                            <a @click="pageNextList(1)">下一页</a>
                            <a  @click="pageNumGetList(pageInfo.total)">尾页</a>
                        </div>
                    </div>
                    <div class="tablelist hidedomdiv showsss" >
                        <div class="bgb member_box">
                            <div class="table_head widthauto"><span class="sma">ID</span><span class="name">公司名称</span><span class="sma">状态</span><span class="oper">操作</span> </div>
                            <ul class="widthauto middl_ul">
                                <li><span class="sma">1</span><span class="name">浙江新天力容器科技有限公司</span> <span class="sma ok">已通过</span><span class="oper"><a href="#" class="one">查看企业详情资料</a></span></li>
                                <li><span class="sma">2</span><span class="name">浙江新天力容器科技有限公司</span> <span class="sma ok">已通过</span><span class="oper"><a href="#" class="one">查看企业详情资料</a></span></li>
                                <li><span class="sma">3</span><span class="name">浙江新天力容器科技有限公司</span> <span class="sma ok">已通过</span><span class="oper"><a href="#" class="one">查看企业详情资料</a></span></li>
                            </ul>
                        </div>
                        <div class="widthauto pages_box"> <a href="#">首页</a><a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">...</a><a href="#">下一页</a><a href="#">尾页</a> </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lf two_left">
            <div class="about_nav">
                <ul class="widthauto">
                    <li><a href="#" class="down" >账户中心</a></li>
                    <p class="widthauto">
                        <a href="/index/consignor/index">我的信息</a>
                        <a href="/index/consignor/reset" >修改密码</a>
                    </p>
                    <li>
                        <a href="/index/consignor/facilitator" >运力服务商</a>
                    </li>
                    <li>
                        <a href="/index/consignor/noticeList"  class="cur">我的发布</a>
                    </li>
                </ul>
            </div>
            <div class="add_box"> <a href="#"><img src="/static/index/public/images/add_008.jpg" /></a> </div>
        </div>
    </div>
    <div v-if="shadeStatus"  class="maska"></div>
    <!--查看原因-->
    <div class="situation rgb" v-if="refuseCauseStatus">
        <div class="message bgb widthauto radius">
            <h6>查看原因<a href="#"><img src="/static/index/public/images/tips_close.png" @click="showRefuseCause()" /></a></h6>
            <dl class="widthauto">
                <dt><img src="/static/index/public/images/reason.png" /></dt>
                <dd><span>审核未通过原因：</span></dd>
                <dd>{{refuseCauseMessage}}</dd>
<!--                <dd>2、路线不完善</dd>-->
<!--                <dd>3、资质补全 等等</dd>-->
            </dl>
        </div>
    </div>
    <!--查看原因end-->
    <!--报名情况-->
    <div class="situation rgb" v-if="applyMemberInfStatus">
        <div class="message bgb widthauto radius">
            <h6>报名情况<a ><img src="/static/index/public/images/tips_close.png" @click="ChangeApplyMemberInfStatus(0)" /></a></h6>
            <div class="bgb member_box">
                <div class="table_head widthauto"><span class="sma">排序</span><span class="name">公司名称</span><span class="sma">报名时间</span><span class="oper">操作</span> </div>
                <ul class="widthauto middl_ul">
                    <li v-for="(item,index) in consignorItemList">
                        <span class="sma">{{(((current_page-1)*num)+index)+1}}</span>
                        <span class="name">{{item.member_info_name}}</span>
                        <span class="sma">{{item.create_time}}</span>
                        <span class="oper">
                            <a :href="'/index/consignor/addItemDetail/id/'+item.member_id" class="one">企业详细资料</a>
                        </span>
                    </li>
<!--                    <li><span class="sma">2</span><span class="name">浙江新天力容器科技有限公司</span> <span class="sma">2021-02-23</span><span class="oper"><a href="#" class="one">企业详细资料</a></span></li>-->
<!--                    <li><span class="sma">3</span><span class="name">浙江新天力容器科技有限公司</span> <span class="sma">2021-02-23</span><span class="oper"><a href="#" class="one">企业详细资料</a></span></li>-->
                </ul>
            </div>
            <div class="widthauto pages_box" v-show="consignorItemPageInfo!=''">
                <a @click="consignorPageNumGetList(1)">首页</a>
                <a @click="consignorPageNextList(-1)">上一页</a>
<!--                <a v-for="item in consignorItemPageInfo.total" @click="consignorPageNumGetList(item)">{{item}}</a>-->
                <a v-for="(item,index) in consignorItemPageInfo.total" :class="(index+1)==item_current_page?'pages_box_cur':''" @click="consignorPageNumGetList(item)">{{item}}</a>
                <a @click="consignorPageNextList(1)">下一页</a>
                <a  @click="consignorPageNumGetList(pageInfo.total)">尾页</a>
            </div>
        </div>
    </div>
    <!--报名情况end-->
    <div v-if="popupsStatus" class="release rgb">
        <div class="message bgb widthauto radius">
            <h6>发布<a ><img @click="closePopups" src="/static/index/public/images/tips_close.png" /></a></h6>
            <ul class="att_box widthauto">
                <li><span>所属分类：</span>
                    <a :class="{'cur':item_category==1}" @click="changeItemCategory(1)" class="choose">招标公告</a>
                    <a :class="{'cur':item_category==2}" @click="changeItemCategory(2)" class="choose">实时货源</a> </li>
                <li><span>标题：</span>
                    <input v-model="itemData.title"  name="" type="text"  class="bai" placeholder="请输入标题"/>
                </li>
                <li><span>服务类别：</span>
                    <select v-model="itemData.service_name" class="five">
                        <option value="">选择类别</option>
                        <option v-for="item in serviceList" :value="item.name">{{item.name}}</option>
                    </select>
                </li>
                <li><span>货物类别：</span>
                    <select v-model="itemData.trade_name" class="five">
                        <option value="">选择类别</option>
                        <option v-for="item in tradeList" :value="item.name">{{item.name}}</option>
                    </select>
                </li>
                <li id="distpicker"><span>地区：</span>
                    <select v-model="itemData.province" class="five">
                        <option>请选择省</option>
                    </select>
                    <select v-model="itemData.city" class="five">
                        <option>请选择城市</option>
                    </select>
                </li>
<!--                <li><span>报名截止日期：</span>-->
<!--                    <select class="five">-->
<!--                        <option>请选择</option>-->
<!--                    </select>-->
<!--                </li>-->
                <li><span>投标截止日期：</span>
                    <input v-model="itemData.end_time" id="end_time" name="" type="text" class="five" placeholder="请选择截止日期"/>
                </li>
                <li><span>预算金额：</span>
                    <input v-model="itemData.budget" name="" type="text" class="five" placeholder="请输入金额"/>
                    万元/年</li>
                <li><span>项目概况：</span>
                    <textarea v-model="itemData.item_about" name="" cols="" rows="" placeholder="请输入内容"></textarea>
                </li>
                <li><span>资格要求：</span>
                    <textarea v-model="itemData.certification_content" name="" cols="" rows="" placeholder="请输入内容"></textarea>
                </li>
                <li><span>项目内容：</span>
                    <textarea v-model="itemData.item_content" name="" cols="" rows="" placeholder="请输入内容"></textarea>
                </li>
                <li><span>附件：</span><a @click="pushAccessory()" class="add">点击添加</a>
                </li>
                <li class="reup" v-for="(item,index) in accessoryList"><span>&nbsp;</span>
                    <input name="" v-model="item.name" type="text"  class="wuba" placeholder="请输入标题"/>
                    <div style="margin: 5px 10px;" class="fileInput left">
                        <input type="file" :ref="'upFileWord'+index"  :name="'upFileWord'+index" :id="'upFileWord'+index" @change="upWord($event,index)" class="upfile"/>
                        <label class="upFileBtn" type="button" :for="'upFileWord'+index" ></label>
                    </div>
                    <div @click="removeFile(item)" class="notice_label_button notice_label_yellow">
                        删除文档
                    </div>

                    <div @click="removeAccessory(index,item)" style=";" class="notice_label_button notice_label_danger">
                        删除此项
                    </div>
                </li>
<!--                <li class="up"><span>&nbsp;</span><input name="" type="text"  class="wuba" placeholder="请输入标题"/><img class="file" src="/static/index/public/images/uploadago.png" />-->
<!--                    <div class="fileInput left">-->
<!--                        <input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>-->
<!--                        <input class="upFileBtn" type="button" onclick="document.getElementById('upfile').click()" />-->
<!--                    </div>-->
<!--                </li>-->
            </ul>
            <div class="submit"><a @click="addNoticeItem()">提交审核</a></div>
        </div>
    </div>
</div>
    {include file="public/footer"}
<style>
    .att_box li label {
        border: #aaa solid 1px;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 0 10px;
        line-height: 38px;
        float: left;
    }
    .release .att_box li .wuba{
        width: 20%;
    }
    .notice_label_button{
        border: none;
        border-radius: 5px;
        height: 34px;
        background-size: 100px;
        width: 100px;
        float: left;
        margin: 5px 10px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
    }
    .notice_label_yellow{
        background: #f8ac59;
        color: #fff;
    }
    .notice_label_danger{
        background: #ed5565;
        color: #fff;
    }
    .order_details .checked select option{
        color: #333;
    }
</style>
<!--全国省份-->
<script src="/static/util/distpicker/distpicker.min.js"></script>
<!--时间组件-->
<script src="/static/util/laydate/laydate.js"></script>
<script type="text/javascript">
    var vmsupplyItem = new Vue({
        el:"#vmsupplyItem",
        data:{
            current_page:'1',//当前页
            num:'15',//每页显示几条
            item_current_page:'1',//报名情况当前页
            item_num:'1',//报名情况每页显示几条
            item_status:["待审核",'已发布','未通过','已截止'],
            item_category_status:['招标公告','实时货源'],
            shadeStatus:false,//遮罩层显示
            popupsStatus:false,//发布框显示
            applyMemberInfStatus:false,//报名情况显示
            refuseCauseStatus:false,//拒绝原因显示
            refuseCauseMessage:'',//拒绝原因显示
            serviceList:[],//服务类型列表
            tradeList:[],//商品类别
            item_category:1,//发布类别，1.招标公告，2.实时货源
            itemData:{

            },
            end_time:'',
            member_id:'',
            itemDataList:[],
            pageInfo:{},
            consignorItemList:[],
            consignorItemPageInfo:'',
            consignor_item_id:'0',
            accessoryList:[
                {"name":'',"fileUrl":''}
            ],
            selectQueryStatus:1,
            queryStatue:0,
            queryTrade:''

        },
        methods:{
            changeQueryStatus:function(num){
                var el = this
                el.selectQueryStatus = num
                if(num == 1){
                    el.getNoticeItem()
                }

            },
            changeItemCategory:function(num){
                this.item_category = num
            },
            openPopups:function () {
                var el = this
                el.shadeStatus = true
                el.popupsStatus = true
                setTimeout(()=>{
                    $('#distpicker').distpicker();
                    laydate.render({
                        elem: '#end_time', //指定元素
                        done: function (value,date,endDate) {
                            el.itemData.end_time =value
                        }
                    });
                },200)


            },
            closePopups:function () {
                this.shadeStatus = false
                this.popupsStatus = false
            },
            getTradeChildList:function(){
                var el = this
                AjaxPost({"trade_id":2},'/index/trade/getTradeChildByWhere').then((response=>{
                    el.serviceList = response.result
                }))
                AjaxPost({"trade_id":1},'/index/trade/getTradeChildByWhere').then((response=>{
                    el.tradeList = response.result
                }))
            },
            addNoticeItem:function () {
                var el = this
                if(el.member_id == ''){
                    $.customToastr('error','未查询到会员信息，请重新登录')
                    return
                }
                //'accessory_info':el.accessory_info_stringify(el.accessoryList)
                var postDate = {
                    ...el.itemData,
                    'item_category':el.item_category,
                    'member_id':el.member_id,
                    'accessory_info':el.accessoryList
                }
                AjaxPost({"postDate":postDate},'/index/consignor/addNoticeItem').then((response)=>{
                    if (response.status == 1){
                        this.shadeStatus = false
                        this.popupsStatus = false
                        $.customToastr('success','添加成功，请等待审核')
                    }
                    console.log(response)
                })


            },
            getNoticeItem:function () {
                let el = this
                var paging = {
                    "current_page":el.current_page,
                    'num':el.num
                }
                var where = {"member_id":el.member_id}
                if (el.selectQueryStatus == 2){
                    if(el.queryTrade !='' ){
                        where['item_category'] = el.queryTrade
                    }
                }
                if (el.selectQueryStatus == 3){
                    if(el.queryStatue !=0 ){
                        where['status'] = el.queryStatue
                    }
                }
                var postDate = {
                    "where":where,
                    "paging":paging
                }
                AjaxPost(postDate,'/index/consignor/getNoticeItem').then((response)=>{
                    if(response.status == 1){
                        if(response.result.list){
                            el.itemDataList = response.result.list
                        }else {
                            el.itemDataList = []
                        }
                        if(response.result.pageInfo){
                            el.pageInfo = response.result.pageInfo
                        }
                        el.setFooter()
                    }
                })
            },
            pageNumGetList:function(page){
                var el = this
                el.current_page = page
                el.getNoticeItem()
            },
            pageNextList:function (num) {
                var el = this;
                var set_current_page = el.current_page*1+num
                // el.current_page = el.pageInfo.current_page*1+num
                console.log(el.current_page)
                if( set_current_page < 1){
                    $.customToastr("error","已经是第一页啦");
                    return;
                }
                if(set_current_page > el.pageInfo.total){
                    $.customToastr("error","已经是最后一页啦");
                    return;
                }
                el.current_page = set_current_page
                el.getNoticeItem();
            },
            upWord:function(event,num){
                var el = this
                layer.prompt({title: '请输入传入文件名称', formType: 2}, function(pass, index){
                    layer.close(index);
                    var files = event.target.files
                    var formData = new FormData();
                    formData.append('files',files[0]);
                    AjaxPost(formData,'/index/image/uploadWord').then((response=>{
                        el.accessoryList[num].name = pass
                        el.accessoryList[num].fileUrl = response.result;
                        console.log(response);
                        console.log(el.accessoryList);
                    }))
                });

            },
            pushAccessory:function () {
                var el = this
                el.accessoryList.push({"name":'',"fileUrl":""})
            },
            removeAccessory:function (num,item) {
                var el = this
                if(item.fileUrl==''){
                    el.accessoryList.splice(num,1)
                }else{
                    var postDate = {
                        "file" :item.fileUrl
                    }
                    AjaxPost(postDate,'/index/image/removeFile').then((response=>{
                        if(response.status == 1){
                            $.customToastr('success','图片删除成功')
                            el.accessoryList.splice(num,1)
                        }
                        console.log(response);
                    }))
                }
            },
            removeFile:function(item){
                if(item.fileUrl==''){
                    return $.customToastr('error','未上传文件')
                }else {
                    var postDate = {
                        "file" :item.fileUrl
                    }
                    AjaxPost(postDate,'/index/image/removeFile').then((response=>{
                        if(response.status == 1){
                            $.customToastr('success','图片删除成功')
                            item.name=''
                            item.fileUrl=''
                        }
                        console.log(response);
                    }))
                }
            },
            accessory_info_stringify:function (arrayData) {
                var newDate = []
                if(arrayData.length>0){
                    $.each(arrayData,(j,k)=>{
                        if(k.fileUrl != ''){
                            newDate.push(k)
                        }
                    })
                    return JSON.stringify(newDate)
                }else {
                    return ''
                }
            },
            setNoticeEnd:function (item) {
                var el = this
                postDate = {
                    'id':item.id,
                }
                layer.confirm('确定要提前截止吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    AjaxPost(postDate,'/index/consignor/changeConsignorItemAddMemberStatus').then((response)=>{
                        if(response.status==1){
                            layer.close(index)
                            $.customToastr('success',response.message)
                            item.status = 4
                        }
                    })
                });

            },

            ChangeApplyMemberInfStatus:function (id) {
                var el = this
                el.shadeStatus = !el.shadeStatus
                el.applyMemberInfStatus = !el.applyMemberInfStatus
                el.consignor_item_id = id
                if(id!=0){
                    el.getConsignorItemAddMemberList()
                }
            },
            getConsignorItemAddMemberList:function () {
                var el =this
                var where = {
                    'consignor_item_id':el.consignor_item_id
                }
                var paging = {
                    "current_page":el.item_current_page,
                    'num':el.item_num
                }
                var postDate = {
                    "where":where,
                    "paging":paging
                }
                AjaxPost(postDate,'/index/consignor/getConsignorItemAddMemberListPage').then((response)=>{
                    if(response.status == 1){
                        if(response.result.list){
                            el.consignorItemList = response.result.list
                        }
                        if(response.result.pageInfo){
                            el.consignorItemPageInfo = response.result.pageInfo
                        }

                    }
                    console.log(response)
                })
            },
            consignorPageNumGetList:function(page){
                var el = this
                el.item_current_page = page
                el.getConsignorItemAddMemberList()
            },
            consignorPageNextList:function (num) {
                var el = this;
                var set_current_page = el.current_page*1+num
                // el.current_page = el.pageInfo.current_page*1+num
                console.log(el.current_page)
                if( set_current_page < 1){
                    $.customToastr("error","已经是第一页啦");
                    return;
                }
                if(set_current_page > el.pageInfo.total){
                    $.customToastr("error","已经是最后一页啦");
                    return;
                }
                el.current_page = set_current_page
                el.getConsignorItemAddMemberList();
            },
            showRefuseCause:function (message) {
                var el = this
                el.shadeStatus = !el.shadeStatus
                el.refuseCauseStatus = !el.refuseCauseStatus
                if(message){
                    el.refuseCauseMessage = message
                }

            },
            RemoveConsignorItem:function (index,id) {
                var el = this
                postDate = {
                    'id':id,
                }
                layer.confirm('确定要删除吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    AjaxPost(postDate,'/index/consignor/RemoveConsignorItem').then((response)=>{
                        if(response.status==1){
                            layer.close(index)
                            $.customToastr('success',response.message)
                            el.itemDataList.splice(index-1,1)
                        }
                    })
                });

            },
            setFooter:function () {
                function footerPosition(){
                    $("footer").removeClass("fixed-bottom");
                    var contentHeight = document.body.scrollHeight,//网页正文全文高度
                        winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏
                    if(!(contentHeight > winHeight)){
                        //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
                        $("footer").addClass("fixed-bottom");
                    } else {
                        $("footer").removeClass("fixed-bottom");
                    }
                }
                setTimeout(()=>{
                    footerPosition();
                    $(window).resize(footerPosition);
                },500)

            }

        },
        mounted(){
            this.$nextTick(function () {
                this.getTradeChildList();
                if(localStorage.getItem("memberId") != null){
                    this.member_id = localStorage.getItem("memberId")
                }
                this.getNoticeItem();
            })
            $(document).ready(function(){

            });
        }
    })
</script>
